<script setup>
import { getRootFolder, addRootFolder, updateRootFolder, delRootFolder, getRootFolderInfo } from '@/assets/api/document'
import { ElMessage } from 'element-plus'
import { createFileManageWebSocket } from '@/utils/websocket'
import { Plus, MoreFilled } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const menus = ref()

const router = useRouter()
const route = useRoute()

const currentIndex = ref('')

const dialogVisible = ref(false)

const ruleFormRef = ref()

const dialogTitle = ref('')

const folderForm = reactive({
  dxmId: null,
  dxmName: '',
  dxmType: '',
  isSys: 1,
  isShow: 2,
  permissionType: '2',
})

const rules = reactive({
  dxmName: [
    { required: true, message: '请输入文件夹名称', trigger: 'blur' },
    { min: 2, max: 100, message: '文件夹名称的长度在2到100个字符', trigger: 'blur' },
  ],
  dxmType: [
    { required: true, message: '请输入文件夹标记', trigger: 'blur' },
    { min: 2, max: 100, message: '文件夹标记的长度在2到100个字符', trigger: 'blur' },
  ],
})

getRootFolderData()

function getRootFolderData() {
  getRootFolder().then((res) => {
    if (res.code === 200) {
      menus.value = res.data
      let forlderId = router.params?.id
      if (!forlderId && res.data && res.data.length > 0) {
        forlderId = res.data[0].folderId || -1
      }
      handleClick(forlderId)
    } else {
      ElMessage.error(res.msg)
    }
  })
}

function handleClick(folderId) {
  currentIndex.value = folderId
  router.push({
    path: `/chat/fileManagement`,
    query: {
      ...route.query,
      id: folderId,
    },
  })
}

function highlightCurrent(value) {
  currentIndex.value = value
}

// add by yagndb 文件夹操作模态框
const handleClose = () => {}

// 新增文件夹提交是的处理函数
const handleFolder = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (folderForm.dxmId) {
        updateRootFolder(folderForm).then((res) => {
          if (res.code === 200) {
            formEl.resetFields()
            dialogVisible.value = false
            getRootFolderData()
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        addRootFolder(folderForm).then((res) => {
          if (res.code === 200) {
            formEl.resetFields()
            dialogVisible.value = false
            getRootFolderData()
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleEditFolder = (item) => {
  if (!item) return
  getRootFolderInfo(item.folderId).then((res) => {
    if (res.code === 200) {
      const { dxmId, dxmName, dxmType } = res.data
      folderForm.dxmId = dxmId
      folderForm.dxmName = dxmName
      folderForm.dxmType = dxmType
      dialogTitle.value = '编辑类目'
      dialogVisible.value = true
    }
  })
}
// 根文件夹删除
const handleDelFolder = (item) => {
  if (!item) return
  ElMessageBox.confirm(`确定要删除文件夹【${item.folderName}】?`)
    .then(() => {
      delRootFolder(item.folderId).then((res) => {
        if (res.code === 200) {
          getRootFolderData()
        }
      })
    })
    .catch(() => {})
}
// 文件夹模态框取消时的处理函数
const handleReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}
</script>

<template>
  <div class="fiz-eim-file-management">
    <div class="menu-nav">
      <div class="menu-plus">
        <el-icon
          class="menu-icon"
          @click="
            () => {
              dialogVisible = true
              dialogTitle = '添加类目'
            }
          ">
          <Plus />
        </el-icon>
      </div>
      <ul class="menu-list">
        <li
          v-for="(item, index) in menus"
          :key="index"
          :class="{ active: item.folderId === currentIndex }"
          class="menu-item"
          @click="handleClick(item.folderId)">
          <SvgIcon :name="`file-menu-${item.folderFlag}`" class="file-menu" />
          <span class="menu-item-label">{{ item.folderName }}</span>
          <span class="action">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-icon size="16"><MoreFilled /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEditFolder(item)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="handleDelFolder(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </li>
      </ul>
    </div>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="dialogTitle" width="600">
      <el-form ref="ruleFormRef" :model="folderForm" :rules="rules" label-width="auto" style="max-width: 600px">
        <el-form-item label="类目名称" prop="dxmName">
          <el-input v-model="folderForm.dxmName" />
        </el-form-item>
        <el-form-item label="类目标记" prop="dxmType">
          <el-input v-model="folderForm.dxmType" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleReset(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="handleFolder(ruleFormRef)">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <FileList @highlightCurrent="highlightCurrent"></FileList>
  </div>
</template>

<style lang="scss" scoped>
.fiz-eim-file-management {
  @include use-flex();
  height: 100%;
  width: 100%;
  border-radius: 8px;
  margin-right: 10px;
  background-color: var(--elp-bg-color);

  .menu-nav {
    border-right: var(--elp-border);

    .menu-plus {
      width: 100%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0px;
      text-align: right;
      right: 5px;
      position: relative;

      .menu-icon {
        border: 1px solid;
        border-radius: 3px;
        width: 18px;
        height: 18px;

        &:hover {
          cursor: pointer;
        }
      }
    }

    .menu-list {
      height: 100%;
      width: 185px;
      padding: 0 20px 20px 20px;
      list-style: none;
      margin: 0;

      flex-shrink: 0;

      .active {
        background-color: var(--elp-color-info-light-9);
      }

      .menu-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 12px;
        border-radius: 3px;

        .action {
          opacity: 0;
          transition: opacity 0.5s;

          .elp-dropdown-link {
            color: var(--elp-color-info-light-5);
          }
        }

        &:hover {
          background-color: var(--elp-fill-color-light);

          .action {
            opacity: 1;
            transition: opacity 0.5s;
          }
        }

        &:not(:last-child) {
          margin-bottom: 5px;
        }

        .file-menu {
          margin-right: 12px;
          width: 30px !important;
          height: 30px !important;
        }

        .menu-item-label {
          width: 185px;
        }
      }
    }
  }
}
</style>
